<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar>
          <template #left>
            <el-form :inline="true">
              
             <el-form-item label="所属部门" prop="orgName">
                 <el-input
                  :clearable="true"
                  class="input"
                  placeholder="搜索部门"
                  v-model="query.orgName"
                  @input="queryChange"
                />
              </el-form-item>
              <el-form-item label="审批状态" prop="status">
                <el-select v-model="query.status" :clearable="true">
                  <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.value"  />
                </el-select>
 
              </el-form-item>
              <el-form-item label="申请时间" prop="daterange">
                <el-date-picker
                  style="width: 250px"
                  v-model="query.daterange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="queryChange"
                />
              </el-form-item>
              <el-form-item label="接口名称" prop="svcName">
                <el-input
                  class="input"
                  placeholder="请输入名称搜索"
                  v-model="query.svcName"
                  @input="queryChange"
                >
                  <template #append>
                    <el-button @click="queryChange" :icon="Search" />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>

    <!-- 新增/编辑 -->
    <EditDrawer
      v-model="showEdit"
      :type="editType"
      :item="currentItem"
      @update-list="refresh"
    />
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import EditDrawer from "./components/EditDrawer.vue";
import ApplyPlatformCascader from '@/components/ApplyPlatformCascader';
import ApproveStatusSelect from '@/components/ApproveStatusSelect';
import OrgCascader from "@/components/OrgCascader/";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';
import { parseTime } from '@/utils'
import {
  getTableList,
  getDetail
} from "@/api/service-apply.js";
export default defineComponent({
  name: "ServiceApplyApprove",
  components: {
    ApproveStatusSelect,
    ApplyPlatformCascader,
    Header,
    FilterBar,
    DynamicTable,
    EditDrawer,
    OrgCascader
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const query = reactive({
      daterange: null,
      status: null,
      applyNodeId: null
    });
    
    let {
      page,
      list,
      total,
      height,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleCreate,
      handleUpdate,
      handleDelete,
      getList,
      queryChange,
      showDetail,
      handleDetail,
    } = useListManage(props, emit, {
      getItems: getTableList,
      query: query,
      getDetail: getDetail,
      deleteItem: null
    });
    const statusList = ref([
      {
        name: '待审批',
        value: 1
      },
       {
        name: '审批通过',
        value: 4
      },
       {
        name: '审批拒绝',
        value: 5
      },
       {
        name: '撤回',
        value: 999
      },
    ])
    const tagType = ref({
      1: 'warning',
      4: 'success',
      5: 'danger',
      999: ''
    })
    const tagName = ref({
      1: '待审批',
      4: '审批通过',
      5: '审批拒绝',
      999: '撤回'
    })
    const tableColumns = ref([
      {
        label: "接口名称",
        key: "svcName",
        minWidth: "200px",
      },
      {
        label: "审批状态",
        width: "100px",
        render: (h, {row, index}) => (
          <span>
            {
              <el-tag
                type={tagType.value[row.status]}
                class="status-tag"
              >
                {tagName.value[row.status]}
              </el-tag>
            }
          </span>
        ),
      },
      {
        label: "申请人",
        key: "applyUserName",
        minWidth: "100px",
      },
      {
        label: "申请部门",
        key: "applyOrgName",
        minWidth: "200px",
      },
      {
        label: "申请应用",
        key: "applyDeptName",
        minWidth: "200px",
      },
      {
        label: "申请说明",
        key: "useReason",
        minWidth: "300px",
      },
      {
        label: "申请时间",
        key: "createDate",
        minWidth: "200px",
        render: (h, {row, index}) => (
          <span>
            {parseTime(row.createDate)}
          </span>
        ),
      },
      
      {
        label: "操作",
        fixed: "right",
        width: "100px",
        render: (h, params) => (
          <span>
            {
             
              <el-button
                
                type="text"
                size="small"
                onClick={() => router.push(`/serviceapply/approve/${params.row.id}`)}
              >
                 {params.row.status === 1?'审批':'查看'}
              </el-button>
            }
          </span>
        ),
      },
    ]);
    onMounted(() => {
      getList();
    });

    return {
      // 列表数据
      page,
      list,
      total,
      Search,
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      // 编辑数据
      editType,
      handleCreate,
      currentItem,
      showEdit,
      refresh,
      router,
      parseTime,
      statusList
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 180px);
}
</style>